<template>
    <div class="movie-list-page" :style="style">
      <div class="category-title" style="padding-top: 600px; margin-top: 0;">热门推荐</div>
      <u-list :list="hotList"></u-list>
      <div class="category-title">实时推荐</div>
      <u-list :list="hotList"></u-list>
      <div class="category-title">离线推荐</div>
      <u-list :list="hotList"></u-list>
    </div>
</template>
<script>
import UList from '../../../components/u-list/u-list.vue'
export default {
  name: 'movie-list',
  components: {
    UList
  },
  data: () => {
    return {
      hotList: [],
      currentList: [],
      outlineList: [],
      firstRecommend: {}
    }
  },
  computed: {
    style () {
      return this.firstRecommend.horizontalImg ? `background-image: url(${this.firstRecommend.horizontalImg})` : ''
    }
  },
  methods: {
    async getHotList () {
      const res = await this.$store.dispatch('movie/GET_MOVIE_LIST', {
        pageNum: 1,
        pageSize: 10
      })
      if (res.code === 100) {
        const first = JSON.parse(JSON.stringify(res.result.list[0]))
        first.horizontalImg = `${first.horizontalImg}?x-oss-process=image/interlace,1/resize,m_fill,w_1628,h_916/quality,q_100/sharpen,100/format,png`
        this.firstRecommend = first
        this.hotList = res.result.list.map(v => ({
          ...v, horizontalImg: `${v.horizontalImg}?x-oss-process=image/interlace,1/resize,m_fill,w_350,h_197/quality,q_100/sharpen,100/format,jpg`
        }))
      }
    },
    async getCurrentList () {
      const res = await this.$store.dispatch('movie/GET_MOVIE_LIST', {
        pageNum: 2,
        pageSize: 10
      })
      if (res.code === 100) {
        this.currentList = res.result.list.map(v => ({
          ...v, horizontalImg: `${v.horizontalImg}?x-oss-process=image/interlace,1/resize,m_fill,w_350,h_197/quality,q_100/sharpen,100/format,jpg`
        }))
      }
    },
    async getOutlineList () {
      const res = await this.$store.dispatch('movie/GET_MOVIE_LIST', {
        pageNum: 3,
        pageSize: 10
      })
      if (res.code === 100) {
        this.outlineList = res.result.list.map(v => ({
          ...v, horizontalImg: `${v.horizontalImg}?x-oss-process=image/interlace,1/resize,m_fill,w_350,h_197/quality,q_100/sharpen,100/format,jpg`
        }))
      }
    }
  },
  mounted () {
  },
  created () {
    this.getHotList()
    // this.getCurrentList()
    // this.getOutlineList()
  }
}
</script>
<style scoped>
.movie-list-page {
  position: relative;
  margin-top: -35px;
  background-size: 100%;
  background-repeat: no-repeat;
}
.category-title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 15px;
}
.first-recommend {
  position: absolute;
  width: 100%;
}
.first-recommend img {
  width: 100%;
  height: 580px;
  font-size: 0;
}
.category-title {
  color: #fff;
  margin-top: 30px;
}
</style>
